<script setup lang="ts">
import Section from '@/components/Section/index.vue'
import { defineProps, ref } from 'vue'
import ItemAsCard from '@/components/item-as-card/index.vue'
let props = defineProps({
  relatives: {
    type: Object
  },
  en: {
    type: String
  },
  zh: {
    type: String
  },
  iconName: {
    type: String
  },
  showb: {
    type: Boolean
  }
})
let imageSize = ref('320rpx')
</script>

<template>
  <Section :icon-name="iconName" :zh="zh" :en="en" :showBorder="showb">
    <view class="content">
      <ItemAsCard
        v-for="item in relatives"
        :item="item"
        :isCollect="item.is_collected"
        :enableCollect="item.enable_collect"
        :enableShare="item.enable_share"
        :enableNavigate="item.enable_navigate"
        :codeVisibility="item.code_visibility"
        class="item"
      />
    </view>
  </Section>
</template>

<style scoped lang="scss">
.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行两个元素 */
  gap: 20rpx;
  padding: 20rpx 0;
}
</style>
